<template>
  <!-- Vue2 中 template 有且只能有一个根元素  -->
  <div>
    <h1>套你猴子</h1>
    <!-- 插值表达式 -->
    <!-- {{表达式}} -->
    <!-- 在data中定位的数据，可以直接在template中使用 -->
    <!-- 语法表达式 -->
    <!-- if while for switch 流程控制语句 -->
    <!-- 表达式：有结果的式子就是表达式 -->
    <h3>我有钱:{{ money }}元</h3>
    <div>我叫{{ obj.name }},今年{{ obj.age }}岁</div>
    <!-- 
      注意事项:
      1.不能使用语句
      2.不能再属性中使用
      3.如果使用变量，必须在data中先声明
     -->
     <!-- <h2>{{ if(money===1000){} }}</h2> -->
     <!-- <div class="container{{money}}"></div> -->

    <div>{{age>20?"去网吧":"在家"}} </div>
  </div>
</template>

<script>
export default {
  //vue 要求的语法，在对象中可以写一些属性
  //data：用于定义数据，必须得是一个函数
  //函数的返回值是一个对象，在对象中定义的属性就是vue的数据
  //data：function(){}
  data() {
    return {
      money: 1000,
      obj: {
        name: "张三",
        age: "20",
       
      }
    }
  }
}
</script>

<style lang="less">
//平时写代码更喜欢写less 这些预处理器
div {
  width: 200px;
  height: 200px;
  background-color: yellow;
  h1 {
    font-size: 12px;
  }
}
</style>